<template>
	<view class="expert-share-list flex-c" v-if="newsList[0]">
		<view class="expert-share-item flex-c" v-for="(article, key) in newsList" :key="key" @tap="goDetail(article)">
			<view class="item-head flex-r ac" v-if="article.type < 3 && showHead" @tap.stop="$CHS.goExpertHome(article.expertId)">
				<view class="author-image border-round">
					<lazy-image class="inheritwh border-round" :src="article.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
					<view class="expert-note" v-if="article.saleArticleNum" :class="{'round': article.saleArticleNum < 10}">
						<text>{{article.saleArticleNum}}</text>
					</view>
				</view>
				<view class="author-info flex-c">
					<view class="info-top flex-r ac">
						<text class="info-top-name text-secondary">{{article.expertName}}</text>
						<image v-if="article.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
						<text class="tag-red" v-if="article.hotContineTxt">{{article.hotContineTxt}}</text>
						<text class="tag-gold" v-else-if="article.hitResultTxt">{{article.hitResultTxt}}</text>
					</view>
					<text class="info-detail text-info color-grey">{{article.expertTag}}</text>
				</view>
			</view>
			<view class="item-body flex-c">
				<view class="item-body-info text-hidden two">
					<text class="text-primary">{{ article.type == 1 ? article.content : article.title }}</text>
				</view>
				<template v-if="article.imageUrl">
					<view class="item-body-image news flex-r" v-if="article.type != 1" :class="{'big-image': article.imageUrl.split(',').length == 1, 'more': article.imageUrl.split(',').length > 3}">
						<lazy-image :src="article.imageUrl.split(',')[0]+'?imageView2/1/w/670/h/376/q/50'" fit="cover" v-if="article.imageUrl.split(',').length == 1"></lazy-image>
						<lazy-image v-for="(img, index) in article.imageUrl.split(',').slice(0, 3)" :src="img+'?imageView2/1/w/218/h/164/q/50'" :key="index" fit="cover" v-else></lazy-image>
						<view class="morenum" v-if="article.imageUrl.split(',').length > 3">
							+{{article.imageUrl.split(',').length - 3}}
						</view>
					</view>
					<view class="item-body-image dynamic flex-r" v-else :class="{'big-image': article.imageUrl.split(',').length == 1}">
						<lazy-image :src="article.imageUrl.split(',')[0]+'?imageView2/1/w/670/h/376/q/50'" fit="cover" v-if=" rticle.imageUrl.split(',').length == 1"></lazy-image>
						<template v-for="(img, index) in article.imageUrl.split(',').slice(0, 9)" v-else>
							<lazy-image :src="img+'?imageView2/1/w/218/h/218/q/50'" :key="index" fit="cover"></lazy-image>
						</template>
					</view>
				</template>
				<view class="item-body-video" v-if="article.videoUrl">
					<FullVideo :url="article.videoUrl" :article="true" width="670rpx" height="376rpx"></FullVideo>
				</view>
			</view>
			<view class="item-foot flex-r ac jsb">
				<view class="item-foot-info text-info color-grey flex-r ac">
					<uni-dateformat :date="article.createTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
					{{new Date() - new Date(article.createTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
					<text class="views">{{article.virtualReadNum || 0}}人查看</text>
				</view>
				<!-- <view class="item-foot-type flex-r ac" v-if="article.typeDesc">
					<text class="text-mini color-blue">{{article.typeDesc}}</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 已弃用 - 2023-07-26
	 */
	export default {
		name: "ch-newslist",
		props: {
			list: {
				type: [Array, Object],
				default: ()=>[]
			},
			showHead: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			newsList() {
				return Object.assign({}, this.list)
			}
		},
		methods: {
			//图片预览
			previewImage(tempFilePaths, current){
				uni.previewImage({
					current: current,
					urls: tempFilePaths,
					loop: true
				});
			},
			//图片加载错误
			imageError(key, index) {
				this.newsList[key].imageUrlList[index] = require('@/public/images/public/error.png');
				this.$forceUpdate()
			},
			//进入晒单动态详情
			goDetail(article) {
				uni.$once('readNum', (data)=>{
					article.virtualReadNum = data.num
				})
				if(article.type == 1){
					this.$CHS.goDynamicDetail(article.id)
				}else if(article.type == 2){
					this.$CHS.goShareDetail(article.id)
				}else{
					this.$CHS.goNewsDetail(article.id)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.expert-share-list{
		padding: 10rpx 0 var(--safe-area-inset-bottom);
		.expert-share-item{
			background: #FFFFFF;
			border-radius: 10rpx;
			//content-visibility: auto;
			padding: 10rpx 20rpx 30rpx;
			margin-bottom: 20rpx;
			.item-head{
				margin-top: 20rpx;
				.author-image{
					position: relative;
					width: 80rpx;
					height: 80rpx;
					background-color: #FFFFFF;
				}
				.author-info{
					margin-left: 20rpx;
					.info-top{
						image{
							margin-left: 7rpx;
							width: 26rpx;
							height: 26rpx;
						}
						.info-top-name{
							font-weight: 500;
						}
					}
					.info-detail{
						margin-top: 15rpx;
					}
				}
				.author-result{
					margin: 0 20rpx 0 0;
					justify-content: center;
					text-align: center;
					.result-score{
						line-height: 42rpx;
						font-size: 42rpx;
						font-weight: bold;
						color: $uni-primary;
					}
					.result-des{
						margin-top: 8rpx;
						font-size: 20rpx;
						color: #333333;
						line-height: 20rpx;
					}
				}
			}
			.item-body{
				margin-top: 16rpx;
				.item-body-info{
					width: 670rpx;
					line-height: 42rpx;
					text-align: justify;
				}
				.item-body-video{
					//background: #1F2633;
					margin-top: 20rpx;
					max-width: 670rpx;
					max-height: 376rpx;
					border-radius: 10rpx;
				}
				.item-body-image{
					flex-wrap: wrap;
					margin-top: 15rpx;
					&.news{
						.lazy-image{
							width: 218rpx;
							height: 164rpx;
							border-radius: 8rpx;
							margin-right: 8rpx; 
						}
						.lazy-image:nth-child(3){
							margin-right: 0;
						}
						&.more{
							justify-content: space-between;
							position: relative;
							.morenum{
								position: absolute;
								top: 0;
								right: 0;
								display: flex;
								align-items: center;
								justify-content: center;
								width: 218rpx;
								height: 164rpx;
								font-size: 40rpx;
								color: #FFFFFF;
								background-color: rgba(0, 0, 0, 0.4);
								border-radius: 8rpx;
							}
						}
					}
					&.dynamic{
						.lazy-image{
							width: 218rpx;
							height: 218rpx;
							border-radius: 8rpx;
							margin: 8rpx 8rpx 0 0;
						}
						.lazy-image:nth-child(3n){
							margin-right: 0;
						}
						.lazy-image:nth-child(-n+3){
							margin-top: 0;
						}
					}
					&.big-image{
						.lazy-image{
							width: 670rpx;
							height: 376rpx;
							border-radius: 10rpx;
							margin-right: 0;
						}
					}
				}
			}
			.item-foot{
				margin-top: 20rpx;
				.item-foot-info{
					.views{
						margin-left: 20rpx;
					}
				}
				.item-foot-type{
					height: 32rpx;
					background: #FFFFFF;
					border: 1rpx solid #4C88FF;
					border-radius: 4rpx;
					box-sizing: border-box;
					padding: 0 9rpx;
				}
			}
		}
	}
</style>